@import '../styles/mixin';

.el-popper {
    max-width: 42%;
}

.auto_height.el-popper {
    max-height: 200px;

    span:nth-child(1) {
        display: inline-block;
        overflow-y: auto;
        max-height: 200px;

        &::-webkit-scrollbar {
            width: 6px;
            height: 10px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgb(144 147 153 / 30%);
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgb(144 147 153 / 60%);
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-track-piece {
            background: transparent;
        }
    }
}

.tags_auto_height.el-popper {
    overflow: auto;
    max-height: 200px;
}

.zw-table {
    // min-height: 450px;
    &__card-header {
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        &.el-row {
            margin: 0 10px 16px;
        }

        &__card-header-left {
            display: flex;
            align-items: center;
        }
    }

    .el-table {
        .el-table__header-wrapper,
        .el-table__fixed,
        .el-table__fixed-right {
            .el-table__header {
                thead {
                    tr {
                        th {
                            background-color: #f9f9f9;
                        }
                    }
                }
            }
        }

        .el-table__body-wrapper {
        }

        .el-table__cell {
            position: relative;

            .el-tooltip {
                @include text-ellipsis(2);
            }
        }

        .el-tag {
            margin-right: 6px;
            margin-bottom: 5px;
        }
    }

    .el-pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 16px;
        padding: 0;

        .el-pagination__sizes {
            margin-right: 0;
        }

        .el-select .el-input__inner {
            width: 80px;
        }
    }

    &__btn-box {
        overflow: hidden;
        margin: -4px;
        text-align: left;
    }

    &__tag-list {
        // 此处是为了修复单个标签过长时，会有种裁切的效果。。
        .el-tag {
            display: inline-block;
            overflow: hidden;
            max-width: 100%;
            vertical-align: middle;
            text-overflow: ellipsis;
            line-height: 22px;
        }
    }

    &__tooltip {
        @include text-ellipsis(2);
    }

    &__empty {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        height: 400px;

        &-img {
            transform: translateX(15%);
        }

        &-title {
            margin-top: -25px;
        }
    }

    .zw-table-dropdown {
        display: inline-block;
    }

    .zw-table__header_o_l {
        display: flex;
        align-items: center;
        margin-right: 5px;
        font-size: 14px;
    }
}
